<template>
	<div class="main">
		
	<!-- 面包屑 start -->
		<ly-title>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
				<el-breadcrumb-item>活动详情</el-breadcrumb-item>
			</el-breadcrumb>
		</ly-title>
	<!-- 面包屑 end -->
			
	<!-- main star -->
		<el-divider>main start</el-divider>
		<ly-fbetween style="height: 400px;">
			<ly-fcolumn style="flex: 3;" class="marr">
				<ly-flex style="flex:1;" class="marb">
					
				<!-- 今日数据变动 start -->
					<ly-box back="white">
						<ly-title>今日数据变动</ly-title>
						<ly-flex style="border: 1px solid green;">
							<ly-fcenter v-for="i in 2" :key="i" style="flex:1; border: 1px solid #909399;">
								<div style="padding: 10px 0;">
									<ly-fcenter>新增学院</ly-fcenter>
									<ly-fcenter><span>6</span>人</ly-fcenter>
								</div>
							</ly-fcenter>
						</ly-flex>
					</ly-box>
				<!-- 今日数据变动 end -->
				</ly-flex>
				<ly-flex style="flex:3;">
					
				<!-- 折线图 start -->
					<ly-box>
						周错了抱歉
					</ly-box>
				<!-- 折线图 end -->
				</ly-flex>
			</ly-fcolumn>
			<ly-fcolumn style="flex:1;">
				<ly-flex style="flex: 1;margin-bottom: 20px;">
					
				<!-- 今日事件 start -->
					<ly-box>
						<ly-scrollbar>
							<ly-title>拉拉啊</ly-title>
							<div>
								<ly-frow-center v-for="(item,index) in 33">
									<ly-fcenter>续费</ly-fcenter>
									<ly-fcenter>拉拉</ly-fcenter>
								</ly-frow-center>
							</div>
						</ly-scrollbar>
					</ly-box>
				<!-- 今日事件 end-->
				</ly-flex>
				<ly-flex  style="flex:1;">
					
				<!-- 学员生日 start -->
					<ly-box>
							<ly-scrollbar>
								<ly-title>拉拉啊</ly-title>
								<div>
									<ly-frow-center v-for="(item,index) in 33">
										<ly-fcenter>啊啊啊</ly-fcenter>
										<ly-fcenter>丫丫</ly-fcenter>
									</ly-frow-center>
								</div>
							</ly-scrollbar>
					</ly-box>
				<!-- 学员生日 end -->
				</ly-flex>
			</ly-fcolumn>
		</ly-fbetween>
		<el-divider>main end</el-divider>
	<!-- main end -->
			
	<!-- 今日数据变动 start -->
		<el-divider>今日数据变动 start</el-divider>
		<ly-box style="background-color: white;height: 100px;">
			<ly-title>今日数据变动</ly-title>
			<ly-flex>
				<ly-fcenter clear v-for="i in 2" :key="i" style="flex:1;border: 1px solid #909399;">
					<ly-fcenter>新增学院</ly-fcenter>
					<ly-fcenter><span>6</span>人</ly-fcenter>
				</ly-fcenter>
			</ly-flex>
		</ly-box>
		<el-divider>今日数据变动 end</el-divider>
	<!-- 今日数据变动 end -->
			
	<!-- 导航 start -->
		<el-divider>导航 start</el-divider>
		<el-scrollbar style="width: 160px;height:180px;background-color: white;">
			<ly-fcenter v-for="(item,index) in 10">
				<span>
					<ly-fcenter><img src="../assets/admin/logo.png"
					 style="background-color: #000000;width: 30px;height: 30px;"></ly-fcenter>
					<ly-fcenter>首页</ly-fcenter>
				</span>
			</ly-fcenter>
		</el-scrollbar>
		<el-divider>导航 end</el-divider>
	<!-- 导航 end -->
		
	<!-- header start -->
		<el-divider>header start</el-divider>
		<ly-fbetween style="padding:4px 20px;background-color: white;">
			<ly-frow-center>
				<img src="../assets/admin/logo.png" style="width: 50px;height: 50px;">
				<span class="marl">云教务管理洗头膏</span>
			</ly-frow-center>
			<ly-frow-center>
				<span class="marr">北京科技惊恐</span>
				<select name="">
					<option value=""></option>
				</select>
			</ly-frow-center>
		</ly-fbetween>
		<el-divider>header end</el-divider>
	<!-- header end -->
		
	<!-- header start -->
		<ly-box>
			<ly-frow-center class="pad marrS">
				<span>学员管理</span>
				<span>添加学员</span>
				<span>添加排课</span>
			</ly-frow-center>
		</ly-box>
	<!-- header end -->
	
	<!-- 课程汇总 start -->
	<el-divider>课程汇总 start</el-divider>
		<ly-frow-center>
			<ly-fcenter style="width: 100px;height: 100px;">拉拉</ly-fcenter>
			<ly-frow-center style="flex: 1;height: 100px;">哒哒</ly-frow-center>
		</ly-frow-center>
	<el-divider>课程汇总 end</el-divider>
	<!-- 课程汇总 end -->
		
	</div>
</template>

<script>
	var time = 0;
	export default{
		created(){
			time = new Date().getTime();
		},
		mounted(){
			var time2 = new Date().getTime();
			console.log('加载页面用时:' + (time2 - time)) + '毫秒';
		}
	}
</script>

<style lang="less" scoped>
	/* 样式更新到 assets css common.css 中了 */
	// html, body, #app {
	//     width: 100%;
	//     height:100%;
	//     margin:0;
	//     padding:0;
	// 		font-size: 14px;
	// 		font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
	// }
	
	// /* margin */
	// .mar{margin: 20px;}
	// .mart{margin-top: 20px;}		.martS>*{margin-top: 20px;}
	// .marr{margin-right: 20px;} 	.marrS>*{margin-right: 20px;}
	// .marb{margin-bottom: 20px;} .marbS>*{margin-bottom: 20px;}
	// .marl{margin-left: 20px;} 	.marlS>*{margin-left: 20px;}
	
	// /* padding */
	// .main,.pad{padding:20px;}
	// .padt{margin-top: 20px;} 		.padtS>*{margin-top: 20px;}
	// .padr{margin-right: 20px;} 	.padrS>*{margin-right: 20px;}
	// .parb{margin-bottom: 20px;} .parbS>*{margin-bottom: 20px;}
	// .padl{margin-left: 20px;} 	.padlS>*{margin-left: 20px;}
	
		
	/* 颜色 start */
		/** 深道浅  https://element-plus.gitee.io/#/zh-CN/component/color
		 * 文字 303133 606266 909399 C0C4CC
		 * 边框 DCDFE6 E4E7ED EBEEF5 F2F6FC
		 * 透明 Transparent
		 */
	/* 颜色 end */
		
		
		/*/ 切记 循环的数据 使用固定宽高（除：flex:1;），因为数据超出格子，会触发浏览器窗口变大，而导致设置100%的父级元素一起受影响  解决方法，最高级高度为0
		// 切记 使用 flex 相对的把宽高改为0
		
		// /* 边距box start * /
		// ly-box{width:100%;height:100%;border-radius: 4px;
		// 		padding: 10px 20px; box-sizing: border-box; display:block;
		// 		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}  // back
		// /* 边距box end * /
		
		// /* flex start * /
		// // 全加 flex  pad  mar wrap clear
		// ly-flex{display: flex;}
		// ly-fbetween{display: flex;justify-content: space-between;}
		// ly-fcolumn{display: flex;flex-direction: column;}
		
		// ly-fcenter{display: flex;justify-content: center;align-items: center;}
		// ly-frow-center{display: flex;align-items: center;}
		// ly-fcol-center{display: flex;align-items: center;}
		// /* flex end * /
		
		// /* 字体 start * /
		// ly-title{ display: block;margin-bottom: 10px;font-size:20px;font-weight: bolder;}
		// ly-span{}
		// ly-rspan{margin-right: 20px;}  // 提供： size  mar pad
		// ly-lspan{margin-left: 20px;}
		// /* 字体 end * /
		
		// /* 其他 start * /
		// ly-scrollbar{}   // 优化 el-scrollbar
		// /* 其他 end */
</style>
